<template>
        <div id="gw" class="container-fluid padding">
            <!--所有坐席数据-->
            <fieldset class="layui-elem-field layui-field-title">
                <legend>所有网关数据</legend>
                <table class="layui-hide" id="gwlist"  lay-filter="gwlist"></table>
            </fieldset>
            <script type="text/html" id="gwToolbar">
                <button class="el-button el-button--primary is-round el-button--mini" lay-event="add">新增网关</button>
                <button class="el-button el-button--primary is-round el-button--mini" lay-event="refresh">刷新</button>
            </script>
            <script type="text/html" id="gwBar">
              <button class="el-button is-round el-button--success el-button--mini" lay-event="edit">编辑</button>
              <button class="el-button is-round el-button--danger el-button--mini" lay-event="del">删除</button>
            </script>
            <!--所有上传的文件列表 先关闭这个功能，使用再打开-->
            <div style="display: none">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>所有上传的文件列表</legend>
                </fieldset>
                <table class="layui-hide" id="filelist" lay-filter="filelist"></table>
                <script type="text/html" id="fileToolbar">
                  <div class="layui-btn-container">
                    <a id="download" class="el-button el-button--primary is-round el-button--mini"  lay-event="drzxTemplateDownload" title="下载exel文件到本地">下载（网关）模版文件到本地</a>
                  </div>
                </script>
                <script type="text/html" id="fileBar">
                    <button class="el-button el-button--success is-round el-button--mini"  lay-event="download">下载</button>
                </script>
            </div>
            <!--重新注册网关 先关闭这个功能，使用再打开-->
            <div class="layui-btn-container small padding">
                <a class="el-button el-button--primary is-round" title="重新注册网关" @click="restartExternal()">重新注册网关</a>
            </div>
            <!--文件上传-->
            <div style="display: none">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>拖拽上传，请选择xls、exel、cvs文件上传</legend>
                </fieldset>
                <el-upload
                        class="upload-demo"
                        drag
                        :with-credentials="credentials"
                        :action="burl+'cti-manager-gw/upload/'"
                        multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">点击上传，或将文件拖拽到此处，如果注册网关失败请点击上方按钮重新注册网关</div>
                </el-upload>
            </div>
            <div id="edit" style="display: none">
                <el-form :model="saveDatas" :rules="rules" ref="saveDatas" label-width="100px" class="padding">
                    <el-form-item label="座机后四位" prop="number">
                        <el-input v-model="saveDatas.number" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="鉴权密码" prop="password">
                        <el-input v-model="saveDatas.password" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="绑定座机" prop="bind_number">
                        <el-input v-model="saveDatas.bind_number" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label=" ">
                        <el-button type="primary" @click="save('saveDatas')">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
</template>

<script>
    import {formatSize,formatDateTime} from '../../../../common/js/util';
    export default {
        name: "drgw",
        beforeCreate: function(){
            this.$nextTick(function () {
                layui.use('table');// 坐席的表格数据,首次加载出来dom
            });
        },
        created:function(){
            this.$nextTick(function () {
                // 再次加载出表格数据（之前已经加载出来了dom数据）
                layui.use('table', ()=>{//加这个是防止刷新的时候会出现不存在render方法
                    layui.table.render({
                        elem: '#gwlist'
                        ,url: burl+'cti-manager-gw/list/' //数据接口
                        ,toolbar: '#gwToolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                        ,title: '所有网关数据'
                        ,height: 480
                        ,totalRow: true
                        ,cols: [this.table_head]
                        ,page: true //开启分页
                    });
                    //头工具栏事件
                    layui.table.on('toolbar(gwlist)', (obj)=>{
                        if(obj.event === 'add'){
                            this.saveDatas={};
                            allIndex = layer.open({
                                type: 1,
                                skin: 'layui-layer-rim', //加上边框
                                area: ['40%','40%'], //宽高
                                close: true,
                                title:'新增网关',
                                shadeClose:true,
                                shade: 0.3,
                                content:$("#edit"),
                                end: ()=>{//关闭隐藏
                                    if (allSuccess=='success'){
                                        obj.update(obj.data)
                                        layer.close(allIndex)
                                        allSuccess = 'faild'
                                    }
                                }
                            })
                        }else if(obj.event=='refresh'){
                            layui.table.render({
                                elem: '#gwlist'
                                ,url: burl+'cti-manager-gw/list/' //数据接口
                                ,toolbar: '#gwToolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                                ,title: '所有网关数据'
                                ,height: 480
                                ,totalRow: true
                                ,cols: [this.table_head]
                                ,page: true //开启分页
                            });
                        }
                    });
                    //监听行工具事件
                    layui.table.on('tool(gwlist)', (obj)=>{
                        if(obj.event === 'del'){
                            layer.confirm('确认删除该行吗？', (index)=>{
                                layer.close(index);
                                this.$post('cti-manager-gw/delete',{id:obj.data.id}).then((response) => {//这里使用了ES6的语法
                                    if (response.data == 1) {
                                        obj.del();
                                        layer.close(index);
                                        this.$message({message:"删除成功！",type:"success"})
                                    }else{
                                        this.$message({message:"删除失败！",type:"error"})
                                    }
                                }).catch((response) => {
                                    consoleLog(response)
                                });
                            });
                        } else if(obj.event === 'edit'){
                            this.saveDatas = obj.data
                            allIndex = layer.open({
                                type: 1,
                                skin: 'layui-layer-rim', //加上边框
                                area: ['40%','40%'], //宽高
                                close: true,
                                title:'修改网关',
                                shadeClose:true,
                                shade: 0.3,
                                content:$("#edit"),
                                end: ()=>{//关闭隐藏
                                    if (allSuccess=='success'){
                                        if (obj.event=='edit'){
                                            obj.update(obj.data)
                                        }
                                        layer.close(allIndex)
                                        allSuccess = 'faild'
                                    }
                                }
                            })
                        }
                    });
                    // 再次加载出表格数据（之前已经加载出来了dom数据）
                    layui.table.render({
                        elem: '#filelist'
                        ,height: 400
                        ,toolbar: '#fileToolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                        ,url: burl+'cti-manager-gw/file-list/' //数据接口
                        ,page: true //开启分页
                        ,totalRow: true
                        ,cols: [this.file_table_head]
                    });
                    //头工具栏事件
                    layui.table.on('toolbar(filelist)', (obj)=>{
                        switch(obj.event){
                            case 'drzxTemplateDownload':
                                $("#download").attr("href",burl+'cti-manager-gw/template-download');
                                $("#download").click();
                                break;
                        };
                    });
                    //监听行工具事件
                    layui.table.on('tool(filelist)', (obj)=>{
                        switch(obj.event){
                            case 'download':
                                this.$my_.downloadFile(obj.data.name,obj.data.path)
                                break;
                        };
                    });
                });
            });

        },
        data() {
            return {
                credentials:true,
                burl :burl,
                saveDatas:{
                    number:'',
                    password:'',
                    bind_number:'',
                },
                rules:{
                    number:[
                        { required: true, message: '请输入座机后四位', trigger: 'change' },
                    ],
                    password:[
                        {required:true,message:'请输入媒体来源', trigger: 'change'}
                    ],
                    bind_number:[
                        {required:true,message:'请输入绑定座机', trigger: 'change'}
                    ],
                },
                table_head:[
                     {field: 'id',  title: '序列号',fixed: 'left', sort: true}
                    , {field: 'number', title: '座机后四位（电话组）', sort: true}
                    , {field: 'password',  title: '鉴权密码'}
                    , {field: 'bind_number',  title: '绑定座机', sort: true}
                    , {field: 'name',  title: '创建用户', sort: true}
                    , {field: 'create_at'
                        ,title: '创建时间'
                        ,sort: true
                        ,templet: function(res){
                            return formatDateTime(res.create_at);
                    }}
                    , {field: 'update_at',
                        title: '更新时间',
                        sort: true,
                        templet: function(res){
                            return formatDateTime(res.update_at);
                    }}
                    , {fixed: 'right', width: 165, align:'center', toolbar: '#gwBar'}
                ],
                file_table_head:[
                    {field: 'id',  title: '序列号', sort: true}
                    , {field: 'name',  title: '文件名称', sort: true}
                    , {field: 'path',  title: '文件路径', sort: true}
                    , {field: 'filesize',
                        title: '文件大小',
                        sort: true,
                        templet: function(res){
                            return formatSize(res.filesize);
                        }}
                    , {field: 'create_at',
                        title: '创建时间',
                        sort: true,
                        templet: function(res){
                            return formatDateTime(res.create_at);
                        }}
                    , {field: 'update_at',
                        title: '更新时间',
                        sort: true,
                        templet: function(res){
                            return formatDateTime(res.update_at);
                        }}
                    , {fixed: 'right',
                        width: 165,
                        align:'center',
                        templet: '#fileBar'
                    }
                ],
            }
        },
        methods: {
            save:function(saveDatas){
                this.$refs[saveDatas].validate((valid)=>{
                    if (valid){
                        this.$post('cti-manager-gw/update',this.saveDatas)
                            .then((response) => {
                                if (response.data == 1) {
                                    allSuccess='success'
                                    layer.close(allIndex)
                                    if (obj.event=='edit'){
                                        this.$message({message:"修改成功！",type:"success"})
                                    }else{
                                        this.$message({message:"新增成功！",type:"success"})
                                    }
                                }else{
                                    allSuccess='faild'
                                    if (obj.event=='edit'){
                                        this.$message({message:"修改失败！",type:"success"})
                                    }else{
                                        this.$message({message:"新增失败！",type:"success"})
                                    }
                                }
                            }).catch((response) => {
                            allSuccess='faild'
                            consoleLog(response)
                        });
                    }else{
                        return false
                    }
                })
            },
            restartExternal: function () {
                var that = this;
                layer.confirm("确定是否要重新注册网关？",function (index) {
                    layer.close(index);
                    that.$post('cti-manager-gw/save-sip-profiles',{}).then((response) => {//这里使用了ES6的语法
                        if (response.data == 1) {
                            layer.confirm("服务器重新注册新网关成功，请等待服务器网关重启，大概花费1分钟左右！",function (index) {
                                layer.close(index);
                                this.$cache_.refresh();
                            });
                        }else{
                            this.$message({message:"服务器重新注册新网关失败！",type:"error"})
                        }
                    }).catch((response) => {
                        consoleLog(response)
                    });
                });
            }
        }
    }
</script>